<template>
  <div class="detail-box" v-if="filminfo">
    <div class="return" @click="handleReturn">
      <img
        src=""
        alt
      />
    </div>
    <img class="detail-img" :src="filminfo.poster" />
    <div class="detail-synopsis">
      <p class="detail-synopsis-name yahei-font">{{ filminfo.name }}</p>
      <p class="detail-synopsis-category font-grow lh yahei-font">
        {{ filminfo.category }}
      </p>
      <p class="detail-synopsis-time font-grow lh yahei-font">上映</p>
      <p class="detail-synopsis-nation font-grow lh yahei-font">
        {{ filminfo.nation }} | {{ filminfo.runtime }} 分钟
      </p>
      <span class="detail-synopsis-grade yahei-font">
        {{ filminfo.grade }}
      </span>
      <div :class="outshowclass">
        {{ filminfo.synopsis }}
      </div>
      <div :class="outspanclass" @click="outshow()">
        <i class="iconfont icon-jiantou"></i>
      </div>
    </div>
    <div class="detail-actorsImg">
      <div class="actorsLabel yahei-font">演职人员</div>
      <div class="actorsimg">
        <swiper
          tag="ul"
          perview="4"
          class="actorswiper"
          myclassname="actorswiper"
        >
          <li
            class="actorsimg-ul-li swiper-slide"
            v-for="data in filminfo.actors"
            :key="data.name"
          >
            <img class="actorsimg-img" :src="data.avatarAddress" alt="" />
            <p class="actorsimg-name yahei-font">{{ data.name }}</p>
            <p class="actorsimg-role font-grow yahei-font">{{ data.role }}</p>
          </li>
        </swiper>
      </div>
    </div>
    <div class="detail-photos">
      <div class="actorsLabel yahei-font">剧照</div>
      <swiper
        tag="ul"
        perview="2"
        class="photoswiper"
        myclassname="photoswiper"
      >
        <li
          class="detail-photos-ul-li swiper-slide"
          v-for="(data, index) in filminfo.photos"
          :key="index"
        >
          <img class="detail-photos-photos" :src="data" />
        </li>
      </swiper>
    </div>
    <div
      class="detailBuy"
      v-show="$store.state.isDetailBuyShow"
      @click="handleToTicket()"
    >
      <a class="detailBuy-a yahei-font" href="javascript:;">选座购票</a>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import swiper from './Detail/DetailSwiper'
import { Indicator } from 'mint-ui'

export default {
  data () {
    return {
      filminfo: null,
      isShow: false,
      cinemalds: '',
      outshowclass: {
        'font-grow': true,
        detailsynopsis: true,
        detailsynopsisnew: false
      },
      outspanclass: {
        outshow: true
      },
      iconfont: {
        iconfont: true,
        iconJiantou: true,
        iconArrowDown: false
      }
    }
  },
  methods: {
    outshow () {
      this.outshowclass.detailsynopsis = this.isShow
      this.outshowclass.detailsynopsisnew = !this.isShow
      this.iconfont.IconArrowDown = !this.isShow
      this.iconfont.IconJiantou = this.isShow
      this.isShow = !this.isShow
    }
  },
  mounted () {
    props: ['id'],
    // console.log("获取id", this.$route.params.id, this.$route.params.router)

    axios({
      url: `https://m.maizuo.com/gateway?filmId=${this.$route.params.id}&k=1746074`,
      headers: {
        'X-Client-Info':
            '{"a":"3000","ch":"1002","v":"5.0.4","e":"1601368144305732951998465"}',
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then((res) => {
      console.log(res.data.data.film)
      this.filminfo = res.data.data.film
      this.$store.state.filminfo = res.data.data.film
    })
  },
  methods: {
    handleToTicket () {
      console.log('filminfo', this.$store.state.filminfo)
      // console.log(name, id);
      this.$router.push({
        name: 'ticket',
        params: { filminfo: this.filminfo }
      })
    },
    handleReturn () {
      this.$router.push('/film/nowplaying')
      // this.$router.push('nowplaying')
    }

  },
  components: { swiper },

  beforeMount () {
    console.log('hidetabbar')
    this.$store.commit('HideMaizuoTabbar', false)
  },

  beforeDestroy () {
    console.log('showtabbar')
    this.$store.commit('ShowMaizuoTabbar', true)
    axios({
      url: `https://m.maizuo.com/gateway/?filmId=${this.$route.params.id}&cityId=440100&k=689282`,
      headers: {
        'X-Client-Info':
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"1601368144305732951998465","bc":"440100"}',
        'X-Host': 'mall.film-ticket.cinema.film-show-cinema'
      }
    }).then((res) => {
      console.log('showCinemas', res.data.data.showCinemas)
      this.$store.state.showdata = res.data.data.showCinemas[0].showDate
      this.$store.state.cinedata = res.data.data.showCinemas[0].cinemaList
      this.$store.state.showCinemas = res.data.data.showCinemas
    })
  }
}
</script>

<style lang="scss" scoped>
// .poster {
//   width: 100%;
//   // height: 400px;
// }
.return {
  position: absolute;
  z-index: 999;
  width: 8.333vw;
  height: 8.333vw;
  left: 1.389vw;
  top: 1.389vw;
  .img {
    width: 8.333vw;
    height: 8.333vw;
  }
}
.detail-img {
  width: 100%;
  float: fixed;
}
.detail-synopsis {
  padding: 15px 15px;
  position: relative;
  min-height: 175px;
  background: #fff;
}
.detail-box {
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 4rem;
  top: 0;
  background: #eee;
  overflow: auto;
  box-sizing: border-box;
}
.detail-synopsis-name {
  font-size: 20px;
}
.detail-synopsis-grade {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 20px;
  color: #ff5f16;
}
.lh {
  margin-top: 7px;
}
.detailsynopsis {
  margin-top: 15px;
  line-height: 25px;
  height: 47px;
  overflow: hidden;
}
.outshow {
  width: 100%;
  text-align: center;
  color: gray;
  opacity: 0.5;
}
.go-back-btn {
  position: fixed;
  width: 30px;
  height: 30px;
  left: 7px;
  top: 7px;
}
.detailsynopsisnew {
  margin-top: 15px;
  line-height: 25px;
  height: auto;
  overflow: hidden;
}
.detail-actorsImg {
  height: 190px;
  background: #fff;
  margin-top: 10px;
}
.actorsimg-img {
  width: 80px;
  height: 100px;
  margin-left: 5px;
}
.actorsimg-name,
.actorsimg-role {
  width: 90px;
  font-size: 10px;
  margin-left: 3px;
}
.actorsimg-img,
.actorsimg-name,
.actorsimg-role {
  text-align: center;
}
.actorsLabel {
  height: 50px;
  box-sizing: border-box;
  padding: 15px 15px;
  font-size: 20px;
}
.detail-photos {
  height: 190px;
  background: #fff;
  margin: 10px 0;
}
.detail-photos-photos {
  width: 100%;
  margin-left: 10px;
}
.detail-photos {
  overflow: hidden;
}
.detailBuy {
  position: fixed;
  bottom: 3px;
  left: 0;
  display: flex;
  width: 100%;
  height: 60px;
  border-top: 1px solid #eee;
  background: #ff5f16;
  text-align: center;
  line-height: 60px;
  z-index: 999;
}
.detailBuy-a {
  display: block;
  height: 100%;
  width: 100%;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}
.detailBuy-a:active {
  background: #fff;
  color: #ff5f16;
  border: 1px solid #ff5f16;
}
</style>
